<template>
	<view class="banner-box">
		<view class="banner-bg" :style="{'background-image': `linear-gradient(${backgroundColor || '#345dc2'} 50%, #fff)`}"></view>
		<swiper class="banner-swiper" indicator-dots indicator-color="rgba(255, 255, 255, 0.5)"
			indicator-active-color="#ffffff" autoplay :interval="4000" :current="current" @change="changeFn">
			<swiper-item v-for="banner in bannerList" :key="banner.id" class="swiper-item">
				<image :src="banner.imageUrl"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			bannerList: {
				type: Array,
				default: () => [
					{
						id: 1,
						imageUrl: '/static/images/it01.png',
						background: '#009b8c',
						advertUrl: 'pages/course/couse-details'
					},
					{
						id: 2,
						imageUrl: '/static/images/it02.png',
						background: '#6e3de6',
						advertUrl: 'pages/course/couse-details'
					},
					{
						id: 3,
						imageUrl: '/static/images/it04.png',
						background: '#0d8e1d',
						advertUrl: 'pages/course/couse-details'
					}
				]
			}
		},
		data () {
			return {
				current: 0,
				backgroundColor: '',
			}
		},
		created () {
			this.backgroundColor = this.bannerList.length ? this.bannerList[0].background : ''
		},
		methods: {
			changeFn (e) {
				this.current = e.detail.current
				this.backgroundColor = this.bannerList[this.current].background
			}
		}
	}
</script>

<style lang="scss">
	.banner-box {
		padding-top: 110rpx;
		/* #ifdef APP-PLUS */
		padding-top: calc(var(--status-bar-height) + 20rpx);
		/* #endif */
		.banner-bg {
			position: absolute;
			top: 0rpx;
			width: 100%;
			height: 470rpx;
			transition: 0.5s;
		}
		.banner-swiper{
			width: 100%;
			height: 350rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>